import { Tabs, TabsProps } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import './index.scss';
import ModelSuppler from './components/ModelSupplier';
import ModelList from './components/ModelList';
import { useSearchParams } from 'react-router-dom';
import PagesHeader from '@/components/pages-header';
import TipDesc from '@/components/tipDesc/tipDesc';
const index = () => {
  const tabsItems: TabsProps['items'] = [
    {
      key: '1',
      label: <div className="text-sm">模型供应商</div>,
    },
    {
      key: '2',
      label: <div className="text-sm">模型列表</div>,
    },
  ];

  const [tabsValue, setTabsValue] = useState('1');
  const modelSupplerRef = useRef(null);

  // const [searchParams] = useSearchParams();

  // const open = searchParams.get('open');

  // useEffect(() => {
  //   if (open) {
  //     modelSupplerRef.current?.openConfig();
  //   }
  // }, [open]);

  return (
    <div className="flex h-full w-full flex-col rounded-default ">
      <PagesHeader>
        模型管理
        <TipDesc title='平台底层大语言模型（LLM）的统一管理和配置中心' />
      </PagesHeader>
      <div className="flex flex-1 flex-col px-5">
        <Tabs items={tabsItems} activeKey={tabsValue} onChange={(key) => setTabsValue(key)} />
        {tabsValue === '1' ? <ModelSuppler ref={modelSupplerRef} /> : <ModelList />}
      </div>
    </div>
  );
};

export default index;
